<link rel="stylesheet" href="https://file.viplgw.cn/ui/thinku-ielts-new/css/course/detail.css?v=1.32">

<link rel="stylesheet" href="https://file.viplgw.cn/ui/thinku-ielts-new/css/course/newCourseDetail.css?v=1.0.0">

<section id="app">
    <input type="hidden" value="<?php echo Yii::$app->session->get('uid');?>" id="uid">
    <input type="hidden" value="<?php echo $class['url'] != false ? $class['url'] : ''?>"  id="videoUrl">
    <input type="hidden"  value="0" id="videoType"><!-- 0 付费五分钟   1公开课 可以全部观看-->

    <div class="courseDetail">
        <p class="titleName"><a href="/mall.html">雅思商城</a> > <?php echo $class['name'] ?></p>
        <div class="videoCover">
            <div :class="isFull?'videoBoxFull':'videoBox'">
                <div class="maskCover" v-if="showLogin" v-cloak>
                    <div class="maskCenter" >
                        <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/guide/propcha.png" alt="" class="machineClose" @click="again">
                        <p>观看完整试听课程，<br> 需登录观看</p>
                    </div>
                </div>
                <div class="tipCover" v-cloak v-if="isTip">
                    <p class="tipTitle">试看结束，本课程内容需购买观看</p>
                    <a class="tipPrice" href="">
                        <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/90.png" alt="">
                        <div class="priceTitle">
                            <p><?php echo $class['price'] ?>元购买</p>
                            <!-- <span>原<?php echo $class['originalPrice'] ?>元</span> -->
                        </div>
                    </a>
                    <div class="resetVideo" @click="again()">
                        <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/89.png" alt="">
                        <span>重新试看</span>
                    </div>
                </div>
                <div class="rightBanner">
                    <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/81.png" alt="">
                    <span>退换无忧</span>
                    <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/82.png" alt="">
                    <span>全程助教</span>
                </div>
                <div class="playVideoBox">
                    <!--  视频播放容器-->
                    <div id="playContent"></div>
                    <!--  默认背景遮罩 -->
                    <div class="videoBoxDetaut"  v-if="!isPlay">
                        <img src="<?php echo $class['pic']!=false?'https://www.thinkuprep.com'.$class['pic']:''?>" class="courseImgCenter" alt="">
                        <a href="javascript:void(0)" class="courseImgPlay" @click="playVideo('<?php echo $class['name'] ?>')" onclick="_czc.push(['_trackEvent','课程详情','视频播放','<?php echo $class['name'] ?>',''])">
                            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/playBtn1.png" alt="">
                        </a>
                    </div>
                    <div :class="isFull?'videoUiFull':'videoUi'" v-cloak>
                        <div class="videoUiLeft">
                            <a href="javascript:void(0)" v-if="!isPlay" @click="playVideo('<?php echo $class['name'] ?>')" onclick="_czc.push(['_trackEvent','课程详情','视频播放','<?php echo $class['name'] ?>',''])">
                                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/77.png" alt="">
                            </a>
                            <a href="javascript:void(0)" v-else @click="pauseVideo()">
                                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/78.png" alt="">
                            </a>
                            <a href="javascript:void(0)" @click="backAhead()">
                                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/79.png" alt="">
                            </a>
                            <a href="javascript:void(0)" @click="goAhead()">
                                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/80.png" alt="">
                            </a>
                            <span class="nowTime">{{current}}</span>
                            <span>/</span>
                            <span class="totleTime">{{duration}}</span>
                        </div>
                        <div class="videoUiRight">
                            <a href="javascript:void(0)" v-if="!isFull" @click="fullScrren()">
                                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/85.png" alt="">
                            </a>
                            <a href="javascript:void(0)" v-else @click="outfullScrren()">
                                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/84.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="courseBox">

                <p class="courseName"><?php echo $class['name'] ?></p>
                <a onclick="_czc.push(['_trackEvent','课程详情','咨询更多优惠，戳我','<?php echo $class['name'] ?>',''])" href="http://p.qiao.baidu.com/cps/chat?siteId=16998561&userId=33849315&siteToken=0848542c0e71b685b68768fcec8e99ef"
                   target="_blank" class="kownMoer">咨询更多优惠，戳我</a>
                <div class="selectIfy">
                    <div class="subject"><p>课程类型</p><a href="javascript:void(0)"><?php switch ($class['cate']) {
                                case 1:
                                    echo '公开课';
                                    break;
                                case 2:
                                    echo '小班课';
                                    break;
                                case 3:
                                    echo '单项课';
                                    break;
                                case 4:
                                    echo '录播课';
                                    break;
                                case 5:
                                    echo '直播课';
                                    break;
                                case 6:
                                    echo '一对一课程';
                                    break;
                                case 8:
                                    echo '热门课程';
                                    break;
                                default:
                                    echo '封闭班';
                            } ?></a></div>
                    <div class="subject"><p>班型</p><a
                                href="javascript:void(0)"><?php echo $class['class'] == 1 ? '小班课' : ($class['class'] == 2?'中小班':'一对一') ?></a></div>
                    <div class="subject"><p>赠&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;送</p><a
                                href="javascript:void(0)">内部资料</a></div>
                </div>
                <div class="coursePrice">
                    <span class="priceName">课程价格</span>

                    <p class="money">¥ <?php echo $class['price'] ?></p>
                    <?php
                        $uid = Yii::$app->session->get('uid');
                        // $token = Yii::$app->session->get('sslToken', $token);
                    ?>
                    <?php if ($uid) { ?>
                    <a onclick="_czc.push(['_trackEvent','课程详情','立即购买','<?php echo $class['name'] ?>',''])" href="https://order.thinkwithu.com/pay/order/index?id=<?php echo $id ?>&num=1&belong=12&sslToken=<?php echo $_COOKIE['sslToken'] ?>"
                       class="buyNow">立即购买</a>
                    <?php } else { ?>
                    <a onclick="_czc.push(['_trackEvent','课程详情','立即购买','<?php echo $class['name'] ?>',''])" href="/login.html?source=10&url=https://www.thinkuprep.com/course-detail/<?php echo $id ?>.html"
                       class="buyNow">立即购买</a>
                    <?php } ?>

                    <a onclick="_czc.push(['_trackEvent','课程详情','课程咨询','<?php echo $class['name'] ?>',''])" href="http://p.qiao.baidu.com/cps/chat?siteId=16998561&userId=33849315&siteToken=0848542c0e71b685b68768fcec8e99ef"
                       target="_blank" class="zxbtn">课程咨询</a>
                </div>
            </div>
        </div>

    </div>
    <div class="courseDetailBox">
        <div class="courseNav">

            <div class="cutOver">
                <a href="javascript:void(0)" class="cutBtn on"  onclick="changeNav('fitPeople','试用人群','<?php echo $class['name'] ?>')">适用人群</a>
                <a href="javascript:void(0)" class="cutBtn"
                   onclick="changeNav('courseSystem','课程体系','<?php echo $class['name'] ?>')">课程体系</a>
                <a href="javascript:void(0)" class="cutBtn"
                   onclick="changeNav('teacher','资深讲师授课','<?php echo $class['name'] ?>')">资深讲师授课</a>
                <a href="javascript:void(0)" class="cutBtn"
                   onclick="changeNav('serviceSystem','服务体系','<?php echo $class['name'] ?>')">服务体系</a>
            </div>
        </div>
        <div id="fitPeople" class="whiteBg">
            <div class="contain">
                <div>
                    <p class="DetailTitle">适用人群</p>
                    <ul class="clearfix">
                        <li>
                            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/newCourse/1@2x.png">
                            <p>
                                <?php echo  isset($class['systemPeople'][0]) ? $class['systemPeople'][0] :''; ?>
                            </p>
                        </li>
                        <li>
                            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/newCourse/2@2x.png">
                            <p>
                            <?php echo  isset($class['systemPeople'][1]) ? $class['systemPeople'][1] :''; ?>
                            </p>
                        </li>
                        <li>
                            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/newCourse/3@2x.png">
                            <p>
                            <?php echo  isset($class['systemPeople'][2]) ? $class['systemPeople'][2] :''; ?>
                            </p>
                        </li>
                        <li>
                            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/newCourse/4@2x.png">
                            <p>
                            <?php echo  isset($class['systemPeople'][3]) ? $class['systemPeople'][3] :''; ?>
                            </p>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
        <div id="courseSystem">
            <div class="contain">
                <p class="DetailTitle">课程体系</p>
                <div class="courseSystemMain">
                    <div class="courseSystemLabel courseSystemLabel1">
                        <p>课程内容</p>
                        <p><?php echo  $class['duration']?>课时</p>
                        <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/newCourse/contentIco.png">
                    </div>
                    <ul class="courseSystemList courseSystemList1">

                    <?php foreach($class['systemContent'] as$k=> $v){ ?>
                        <li class="courseSystemItem">
                            <p>
                                <span class="courseSystemNum"><?php echo $k+1 ?></span>
                                <span><?php echo $v?></span>
                            </p>
                        </li>
                    <?php } ?>

                    </ul>
                </div>
                <div class="courseSystemMain">
                    <div class="courseSystemLabel courseSystemLabel2">
                        <p>上课周期</p>
                        <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/newCourse/periodIco.png">

                    </div>
                    <ul class="courseSystemList courseSystemList2">
                    <?php foreach($class['systemCourse'] as$k=> $v){ ?>
                        <li class="courseSystemItem">
                            <p>
                                <span class="courseSystemNum"><?php echo $k+1 ?></span>
                                <span><?php echo $v?></span>
                            </p>
                        </li>
                        <?php } ?>
                    </ul>
                </div>
            </div>
        </div>
        <div id="teacher">
            <div class="contain">
                <p class="DetailTitle">授课资深讲师</p>

                <ul class="teacherList">

                <?php foreach($class['systemTeacher'] as$k=> $v){ ?>
                    <li>
                        <a href="/teacher-detail/<?php echo $v['id'] ?>.html">
                            <p class="teacherImg">
                                <img src="<?php echo $v['pic'] ?>"></p>
                            <div class="teacherMain">
                                <p class="teacherName">
                                    <span><?php echo $v['name'] ?>  </span>
                                    <span><?php echo $v['smallIntro'] ?> </span>
                                </p>
                                <p class="teacherDes">
                                <?php echo $v['student_word'] ?>
                                </p>
                            </div>
                        </a>
                    </li>
                    <?php  }?>

                </ul>
            </div>
        </div>
        <div id="serviceSystem">
            <div class="contain">
                <p class="DetailTitle">服务体系</p>
                <div class="serviceSystemMain">
                    <ul class="serviceSystem1">
                        <li><img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/newCourse/courseBefore@2x.png">
                            <p>课前</p>
                        </li>
                        <li>
                            <p> 添加学管老师</p>
                            <p class="serviceSystemNum">1</p>
                        </li>
                        <li>
                            <p> 测评访谈</p>
                            <p class="serviceSystemNum">2</p>

                        </li>
                        <li>
                            <p> 建微信服务群</p>
                            <p class="serviceSystemNum">3</p>

                        </li>
                        <li>
                            <p> 课前基础课开通</p>
                            <p class="serviceSystemNum">4</p>

                        </li>
                        <li>
                            <p> 一对一定制<br>学习计划</p>
                            <p class="serviceSystemNum">5</p>

                        </li>

                    </ul>
                    <ul class="serviceSystem2">
                        <li>
                            <p> 笔记总结，解决<br>疑问，定向提分 </p>
                            <p class="serviceSystemNum">9</p>

                        </li>
                        <li>
                            <p> 资深讲师作业批改 </p>
                            <p class="serviceSystemNum">8</p>

                        </li>
                        <li>
                            <p> 老师一对一分析<br>
                                指出问题 </p>
                            <p class="serviceSystemNum">7</p>

                        </li>
                        <li>
                            <p> 开始直播课程</p>
                            <p class="serviceSystemNum">6</p>

                        </li>
                        <li><img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/newCourse/courseIn@2x.png">
                            <p>课中</p>
                        </li>
                    </ul>
                    <ul class="serviceSystem3">
                        <li><img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/newCourse/courseAfter@2x.png">
                            <p>课后</p>
                        </li>
                        <li>
                            <p> 超长课程回看</p>
                            <p class="serviceSystemNum">10</p>

                        </li>
                        <li>
                            <p> 模考解析，考前突破</p>
                            <p class="serviceSystemNum">11</p>

                        </li>
                        <li>
                            <p> 参加考试，出分成功</p>
                            <p class="serviceSystemNum">12</p>

                        </li>
                    </ul>
                </div>
                <p class="DetailTitle">服务内容</p>
                <ul class="serviceContentList">
                <?php foreach($class['systemServe'] as$k=> $v){ ?>
                    <li>
                        <span class="serviceContentNum"><?php echo $k+1 ?></span>
                        <span class="serviceContentMain"><?php echo $v?></span>
                    </li>
                    <?php } ?>
                </ul>
            </div>

        </div>
        <div id="buyNotes">
            <div class="contain">
                <p class="DetailTitle">购课须知</p>
                <div class="buyNotesCard">
                    <ul>
                        <li>
                            <label>【使用提示】</label>
                            <div class="buyNotesDes">
                                1、本产品在线使用，联网即可，不限地域，全球均可购买。<br>
                                2、获取更多雅思信息，请关注【申友雅思】微信公众号。
                            </div>
                        </li>
                        <li>
                            <label>【版权说明】</label>
                            <div class="buyNotesDes">
                                1、所有课程版权属申友雅思在线网所有，禁止进行课程转卖。违者可追究法律责任。
                            </div>
                        </li>
                    </ul>
                    <div class="wechat">
                        <p><img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/newCourse/code.png"></p>

                        <p> 获取更多雅思信息，请关注<br>
                            【申友雅思】微信公众号</p>
                    </div>
                </div>

            </div>
        </div>
<!--        <div class="synopsis" v-if="index==0">-->
<!--            --><?php //echo $class['introduction'] ?>
<!--        </div>-->
        <div class="assess" v-if="index==1">
            <!--  暂无评价-->
            <div class="noBox">
                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/88.png" alt="">
                <p class="nopj">暂无评价哦！</p>
            </div>
            <!--  有评价 遍历 assessItem-->
            <!--                <div class="assessItem">-->
            <!--                    <div class="assessItemLeft">-->
            <!--                        <img src="" alt="用户头像">-->
            <!--                    </div>-->
            <!--                    <div class="assessItemRight">-->
            <!--                        <p class="itemUserName">用户名</p>-->
            <!--                        <div class="itemUserContent">用户名用户名用户名用户名用户名用户名用户名用户名用户名用户名用户名</div>-->
            <!--                        <p class="itemTime">2021.01.15</p>-->
            <!--                    </div>-->
            <!--                </div>-->
        </div>
        <div class="recommend" v-if="index==2">
            <?php foreach ($recommend as $v) { ?>
                <div class="recommendItem">
                    <div class="recommendImg"><img src="<?php echo $v['pic'] ?>" alt=""></div>
                    <p class="recommendName"><?php echo $v['name'] ?></p>
                    <p class="recommendSh"><?php echo $v['student'] ?></p>
                    <p class="recommendSh"><?php echo $v['classTime'] ?></p>
                    <div class="recommendBtn">
                        <a href="/course-detail/<?php echo $v['id'] ?>.html" class="recommendDetailBtn">查看详情</a>
                        <a href="/login.html?source=10&url=http://<?php echo $_SERVER['SERVER_NAME'] . Yii::$app->request->getUrl() ?>"
                           class="recommendBuyBtn">购买 ></a>
                    </div>
                </div>
            <?php } ?>
        </div>
    </div>
</section>
<script type="text/javascript" src="https://file.viplgw.cn/ui/thinku-ielts-new/js/play/cyberplayer.js?v=1.9.1"></script>

<script type="text/javascript" src="https://file.viplgw.cn/ui/thinku-ielts-new/js/play/js/jquery-ui-1.10.3.custom.min.js?v=1.1.1"></script>
<script src="https://file.viplgw.cn/ui/thinku-ielts-new/js/courseDetail.js?v=1.3"></script>
<script>
    var courseSystemListH1 = Number($('.courseSystemList1').height() + 46);
    console.log('courseSystemListH', courseSystemListH1);
    $('.courseSystemLabel1').css({
        "height": courseSystemListH1
    });
    var courseSystemListH2 = Number($('.courseSystemList2').height() + 46);
    console.log('courseSystemListH', courseSystemListH2);
    $('.courseSystemLabel2').css({
        "height": courseSystemListH2
    });
    function changeNav(clas,name,courseName) {
        _czc.push(['_trackEvent','课程详情',name,courseName,'']);
        var fitPeopleTop = Number($('#fitPeople').offset().top - 40);
        console.log('fitPeopleTop', fitPeopleTop);
        var courseSystemTop = Number($('#courseSystem').offset().top - 60);
        var teacherTop = Number($('#teacher').offset().top - 60);
        var serviceSystemTop = Number($('#serviceSystem').offset().top - 60);
        var buyNotesTop = Number($('#buyNotes').offset().top - 60);
        if (clas == 'fitPeople') {
            $("body,html").scrollTop(fitPeopleTop);
        } else if (clas == 'courseSystem') {
            $("body,html").scrollTop(courseSystemTop);
        } else if (clas == 'teacher') {
            $("body,html").scrollTop(teacherTop);
        } else if (clas == 'serviceSystem') {
            $("body,html").scrollTop(serviceSystemTop);
        } else if (clas == 'buyNotes') {
            $("body,html").scrollTop(buyNotesTop);
        }
    }
    window.onscroll = function () {
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        console.log('t', t);
        var fitPeopleTop = $('#fitPeople').offset().top;
        var courseSystemTop = $('#courseSystem').offset().top;
        var teacherTop = $('#teacher').offset().top;
        var serviceSystemTop = $('#serviceSystem').offset().top;
        var buyNotesTop = $('#buyNotes').offset().top;
        //console.log('t', t)

        if (t < fitPeopleTop) {
            $('.cutOver  a').removeClass('on');
            $('.cutOver  a:nth-child(1)').addClass('on');
        } else if (t > fitPeopleTop && t < courseSystemTop) {
            $('.cutOver  a').removeClass('on');
            $('.cutOver  a:nth-child(2)').addClass('on');
        } else if (t > courseSystemTop && t < teacherTop) {
            $('.cutOver  a').removeClass('on');
            $('.cutOver  a:nth-child(3)').addClass('on');
        } else if (t > teacherTop && t < serviceSystemTop) {
            $('.cutOver  a').removeClass('on');
            $('.cutOver  a:nth-child(4)').addClass('on');
        }

    }
</script>
